﻿@namespace BlazorFluentUI
@inherits FluentUIComponentBase

<div class=@($"mediumFont ms-Toggle {GetClassExtras()}") style=@Style>
    @if (!string.IsNullOrWhiteSpace(Label) || !string.IsNullOrWhiteSpace(CustomLabel?.ToString()))
    {
        <Label ClassName="ms-Toggle-label" HtmlFor=@Id>
            @Label@CustomLabel
        </Label>
    }
    <div class="ms-Toggle-container">
        <KeytipData>
            <button class="ms-Toggle-pill"
                    disabled=@(Disabled || commandDisabled)
                    id=@Id
                    type="button"
                    role=@GetToggleRole()
                    aria-disabled=@(Disabled || commandDisabled)
                    aria-checked=@IsChecked
                    aria-label=@AriaLabel
                    data-is-focusable="true"
                    @onclick=@OnClick
                    aria-labelledby=@LabelledById>
                <div class="ms-Toggle-thumb" />
            </button>
        </KeytipData>
        @if (!string.IsNullOrWhiteSpace(StateText))
        {
            <Label HtmlFor=@Id ClassName="ms-Toggle-stateText">
                @StateText
            </Label>
        }
    </div>
</div>